<template>
	<div class="homeShare" :style="{'min-height':bodyHeight+'px'}">
		<div class="wd_welfare_Invitation">
			<img src="../../../../static/img/images/homeShare1.png" class="wd_welfare_InvitationImg" />
			<p class="wd_welfare_InvitationP">0次激活代言基金，剩余基金额度</p>
			<div class="wd_welfare_InvitationNum flex justify_cen">
				<span class="wd_welfare_InvitationNums1">{{jiang[0]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[1]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">,</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[2]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[3]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[4]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">,</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[5]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[6]}}</span>
				<span class="wd_welfare_InvitationNums1">{{jiang[7]}}</span>
				<span class="wd_welfare_InvitationNums2 flex align_end justify_cen">匠子</span>
			</div>
			<div class="wd_welfare_InvitationP2">
				已领到0匠子
				<span>查看详情></span>
			</div>
			
		</div>
		<div class="clear2">
			<div class="homeShare_body" @click="jump">
				<div class="homeShare_body2">
					<img src="../../../../static/img/images/homeShare2.png" class="homeShare_bodyImg" />
					<div class="homeShare_bodyContent">
						<div class="homeShare_bodyHead">
							<img src="../../../../static/img/images/people.jpg" />
						</div>
						<p class="homeShare_bodyName">O(∩_∩)O默</p>
						<p class="homeShare_bodyText">我为品质生活代言</p>
					</div>
				</div>
				<div class="homeShare_body3 clear2">
					<p>获得匠子额度</p>
					<p>10000匠子</p>
				</div>
				<div class="homeShare_body3 clear2">
					<p>2人助力推选</p>
					<p>完成0人</p>
				</div>
			</div>
			<div class="homeShare_body">
				<div class="homeShare_body2">
					<img src="../../../../static/img/images/homeShare2.png" class="homeShare_bodyImg" />
					<div class="homeShare_bodyContent">
						<div class="homeShare_bodyHead">
							<img src="../../../../static/img/images/people.jpg" />
						</div>
						<p class="homeShare_bodyName">O(∩_∩)O默</p>
						<p class="homeShare_bodyText">我为品质生活代言</p>
					</div>
				</div>
				<div class="homeShare_body3 clear2">
					<p>获得匠子额度</p>
					<p>10000匠子</p>
				</div>
				<div class="homeShare_body3 clear2">
					<p>2人助力推选</p>
					<p>完成0人</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				jiang:[],
				jiangNum:'99999999',
				bodyHeight:0
			}
		},
		mounted() {
			this.bodyHeight=document.body.offsetHeight;
        	let num = this.jiangNum.toString();
			let html_num=[];
			html_num=num.split('');
			if(html_num.length<8){
				let num_length=8-html_num.length
				for(let i=0;i<num_length;i++){
					html_num.splice(0,0,"0");
				}
			}
			this.jiang=html_num;
		},
		methods: {
			jump(){
				this.$router.push({
					path: '/homeShareDatil',
				})
			}
		}
	}
</script>

<style scoped>
	.homeShare{
		background: #000;
	}
	.wd_welfare_Invitation{
		width: 100%;
		background: #000;
		padding-bottom: 1rem;
		
	}
	.wd_welfare_InvitationImg{
		width: 100%;
		display: block;
	}
	.wd_welfare_InvitationP{
		font-size: 1.2rem;
		color: #fff;
		text-align: center;
		margin: 1.2rem 0 0.8rem 0;
	}
	.wd_welfare_InvitationNum{
		width: 100%;
	}
	.wd_welfare_InvitationNums1{
		font-size: 2.4rem;
		color: #f9e5a4;
		display: inline-block;
		padding: 0.1rem 0.2rem;
		border: 0.1rem solid #666666;
		border-radius: 0.4rem;
	}
	.wd_welfare_InvitationNums2{
		font-size: 1.5rem;
		color: #f9e5a4;
		padding: 0 0.5rem;
	}
	.wd_welfare_InvitationNums2:nth-last-child(1){
		padding-left: 0.8rem;
	}
	.wd_welfare_InvitationP2{
		margin: 2rem 0 1rem 0;
		text-align: center;
		position: relative;
		color: #f9e5a5;
		font-size: 1.5rem;
		height: 1.5rem;
	}
	.wd_welfare_InvitationP2 span{
		position: absolute;
		display: inline-block;
		height: 1.5rem;
		top: 0;
		right: 10%;
		font-size: 1.2rem;
		color: #f9e5a5;
		line-height: 1.8rem;
		
	}
	.wd_welfare_InvitationBody{
		width: 88%;
		padding: 0 6%;
	}
	.wd_welfare_InvitationBodyImg{
		width: 32%;
		float: left;
		margin-top: 1rem;
	}
	.wd_welfare_InvitationBodyImg:nth-child(3n-1){
		margin: 1rem 2% 0 2%;
	}
	.wd_welfare_InvitationBodyImg img{
		width: 100%;
		display: block;
	}
	.homeShare_body{
		float: left;
		width: 45%;
		box-sizing: border-box;
		margin: 2.5%;
		position: relative;
	}
	.homeShare_body:nth-child(2n){
		float: right;
	}
	.homeShare_body2{
		width: 100%;
		box-sizing: border-box;
		position: relative;
		border: 2px solid #e5dcc1;
	}
	
	.homeShare_bodyImg{
		width: 100%;
		display: block;
		
	}
	.homeShare_bodyContent{
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		transform: translate(0,-50%);
	}
	.homeShare_bodyHead{
		width: 6rem;
		height: 6rem;
		border: 4px solid #f7bd40;
		border-radius: 15rem;
		overflow: hidden;
		margin: 0 auto;
	}
	.homeShare_bodyHead img{
		width: 100%;
		display: block;
		height: 100%;
	}
	.homeShare_bodyName{
		line-height: 2.5rem;
		text-align: center;
		font-size: 1.5rem;
		color: #fff;
	}
	.homeShare_bodyText{
		line-height: 1.5rem;
		text-align: center;
		font-size: 1rem;
		color: #fff;
	}
	.homeShare_body3{
		padding-top:1.5rem;
		width: 100%;
	}
	.homeShare_body3 p{
		font-size: 1.3rem;
		line-height: 1.5rem;
		color: #999;
	}
	.homeShare_body3 p:nth-child(1){
		float: left;
	}.homeShare_body3 p:nth-child(2){
		float: right;
	}
</style>